<!doctype html>
<script src="../../resources/js-test.js"></script>
<style>
target {
    background-color: white;
}
:placeholder-shown + target {
    background-color: rgb(1, 2, 3);
}
</style>
<div>
    <input id="input-with-renderer">
    <target id="target1"></target>
    <textarea id="textarea-with-renderer"></textarea>
    <target id="target2"></target>
</div>
<div style="display:none;">
    <input id="input-without-renderer">
    <target id="target3"></target>
    <textarea id="textarea-without-renderer"></textarea>
    <target id="target4"></target>
</div>
<script>
description('Test style update of the :placeholder-shown pseudo class.');
function testBackgroundColor(expectMatch) {
    shouldBeEqualToString('getComputedStyle(document.getElementById("target1")).backgroundColor', expectMatch ? 'rgb(1, 2, 3)' : 'rgb(255, 255, 255)');
    shouldBeEqualToString('getComputedStyle(document.getElementById("target2")).backgroundColor', expectMatch ? 'rgb(1, 2, 3)' : 'rgb(255, 255, 255)');
    shouldBeEqualToString('getComputedStyle(document.getElementById("target3")).backgroundColor', expectMatch ? 'rgb(1, 2, 3)' : 'rgb(255, 255, 255)');
    shouldBeEqualToString('getComputedStyle(document.getElementById("target4")).backgroundColor', expectMatch ? 'rgb(1, 2, 3)' : 'rgb(255, 255, 255)');
}
var inputCaseWithRenderer = document.getElementById("input-with-renderer");
var textareaCaseWithRenderer = document.getElementById("textarea-with-renderer");
var inputCaseWithoutRenderer = document.getElementById("input-without-renderer");
var textareaCaseWithoutRenderer = document.getElementById("textarea-without-renderer");
function setAttribute(attribute, value) {
    inputCaseWithRenderer.setAttribute(attribute, value);
    textareaCaseWithRenderer.setAttribute(attribute, value);
    inputCaseWithoutRenderer.setAttribute(attribute, value);
    textareaCaseWithoutRenderer.setAttribute(attribute, value);
}
debug("Initial state is without placehoder.");
testBackgroundColor(false);
debug("Adding a placeholder, the targets should match the style.");
setAttribute("placeholder", "WebKit")
testBackgroundColor(true);
</script>
